import {Component, OnInit} from '@angular/core';
import {Car} from '../../domain/car';
import {CarService} from '../../service/car.service';

@Component({
  selector: 'app-demo-table',
  template: `
    <div class="content-section implementation">
      <h3 class="first">Basic</h3>
      <p-table [value]="cars">
        <ng-template pTemplate="header">
          <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-car>
          <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
          </tr>
        </ng-template>
      </p-table>

      <h3>Dynamic Columns</h3>
      <p-table [columns]="cols" [value]="cars">
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr>
            <td *ngFor="let col of columns">
              {{rowData[col.field]}}
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  `
})
export class TableDemoComponent implements OnInit {

  cars: Car[];

  cols: any[];

  constructor(private carService: CarService) { }

  ngOnInit() {
    this.carService.getCarsSmall().then(cars => this.cars = cars);

    this.cols = [
      { field: 'vin', header: 'Vin' },
      { field: 'year', header: 'Year' },
      { field: 'brand', header: 'Brand' },
      { field: 'color', header: 'Color' }
    ];
  }
}
